import React, { Component } from 'react'
import './App.css';
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'

class App extends Component {

  state = {
    todos:[
      {id:1,name:'吃饭',done:true},
      {id:2,name:'睡觉',done:false},
      {id:3,name:'打代码',done:true},
    ]
  }

  addToDo = (toduObj)=>{
    const todos = this.state.todos
    const newToDos = [toduObj,...todos]
    this.setState({
      todos:newToDos
    })
  }

  updateToDo = (id,done)=>{
    const newTodos = this.state.todos.map(item=>{
      if(item.id === id){
        item.done = done
        return item
      }else{
        return item
      }
    })
    this.setState({
      todos:newTodos
    })
  }

  delteItem = (id)=>{
    console.log('即将删除',id)
    const newArr = this.state.todos.filter(item=>item.id!==id)
    this.setState({
      todos:newArr
    })
  }

  changeCheckAll = (event)=>{
    console.log('全选事件',event.target.checked)
    const newTodos = this.state.todos.map(item=> {
      return {...item,done:event.target.checked}
    })
    this.setState({
      todos:newTodos
    })
  }

  clearDone = ()=>{
    const newTodos = this.state.todos.filter(item=>!item.done)
    this.setState({
      todos:newTodos
    })
  }

  render(){
    return (
      <div className="mainContainer">
        {/* // react子组件给父组件传值 通过的方式是父组件给子组件传递一个回调函数，子组件执行这个回调函数并传参，父组件就可以接收到这个参数 */}
        <Header addToDo={this.addToDo}></Header>
        <List updateToDo={this.updateToDo} todos={this.state.todos} delteItem={this.delteItem}></List>
        <Footer todos={this.state.todos} changeCheckAll={this.changeCheckAll} clearDone={this.clearDone}></Footer>
      </div>
    );
  }
  
}

export default App;
